<template>
	<view class="content">
	<!-- 	<svg style="background: #50858B; height: 100; width: 550;" fill="#EAF4EF" xmlns="http://www.w3.org/2000/svg">
			<path id="wave_loading" d="M 0 90 C 100 20, 150 100, 250 100 Q 300 100 , 550 30 V 300 H 0 V 100  z"></path>
		</svg> -->
		<image mode="scaleToFill" style="position:absolute;top:0;width: 100%;" src="data:image/svg+xml,%3Csvg style='background:%2350858b;height:100;width:550' fill='%23EAF4EF' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 90c100-70 150 10 250 10q50 0 300-70v270H0V100z'/%3E%3C/svg%3E"></image>
		<image class="logo" src="/static/logo.png"></image>
		
		<view class="form">
			<view class="head">
				<button class="register-btn" @click="register">注 册</button>
				<image src="data:image/svg+xml,%3Csvg data-name='Iconly/Bold/Scan' xmlns='http://www.w3.org/2000/svg' width='22' height='18' viewBox='0 0 22 18'%3E%3Cpath data-name='Scan' d='M14.6 18a.747.747 0 1 1 0-1.493h1.593a2.44 2.44 0 0 0 2.462-2.414v-3.56h-2.623v.992a2.269 2.269 0 0 1-2.27 2.266H8.238a2.269 2.269 0 0 1-2.269-2.266v-.992H3.346V14.1A2.437 2.437 0 0 0 5.8 16.506h1.628a.747.747 0 1 1 0 1.493H5.8a3.946 3.946 0 0 1-3.974-3.9v-3.565H.762a.746.746 0 1 1 0-1.492h20.477a.746.746 0 1 1 0 1.492h-1.062v3.56A3.95 3.95 0 0 1 16.194 18zM6.24 7.523a.278.278 0 0 1-.27-.269V6.008a2.268 2.268 0 0 1 2.269-2.265h5.524a2.26 2.26 0 0 1 2.27 2.265v1.246a.28.28 0 0 1-.273.269zm12.415-1.76V3.906a2.44 2.44 0 0 0-2.461-2.413H14.6a.754.754 0 0 1-.761-.745A.755.755 0 0 1 14.6 0h1.593a3.948 3.948 0 0 1 3.983 3.906v1.857a.761.761 0 0 1-1.522 0zm-16.831 0V3.9A3.945 3.945 0 0 1 5.8 0h1.63a.755.755 0 0 1 .761.747.753.753 0 0 1-.761.746H5.8A2.436 2.436 0 0 0 3.347 3.9v1.862a.762.762 0 0 1-1.524 0z' fill='%2350858b'/%3E%3C/svg%3E" mode="widthFix"></image>
			</view>
			<view class="input">
				<span>手机 phone number</span>
				<input type="text" value="手机" />
				<span>密码 passwords</span>
				<input type="text" value="密码" />
			</view>
			<view class="footer"><button class="login-btn" @click="login">sign up</button></view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {};
	},
	onLoad() {},
	methods: {
		register() {},
		login() {
			uni.redirectTo({
				url: '../redirect/register-redirect/index'
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.content {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	position: relative;
	z-index: 1;
}
.top{
	width: 100%;
}
.logo {
	height: 200rpx;
	width: 200rpx;
	margin-top: 300rpx;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 100rpx;
	z-index: 99;
	border-radius: 40rpx;
}
.form {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	width: calc(100% - 40px);
	background: #ffffff;
	border-radius: 60rpx;
	height: 50vh;
	z-index: 99;
}
.head {
	width: calc(100% - 80px);
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 50rpx;
	margin-bottom: 60rpx;
	.register-btn {
		width: 120rpx;
		margin: 0;
		font-size: 20rpx;
		border-radius: 40rpx;
		background: $-color-theme-3;
		color: #ffffff;
		text-align: center;
	}
	image {
		width: 50rpx;
		height: 50rpx;
	}
}
.input {
	width: calc(100% - 80px);
	margin-bottom: 15%;
	input {
		margin: 20rpx;
		width: 100%;
		border-bottom: 1px solid $uni-text-color-disable;
		border-top: 0px;
		border-left: 0px;
		border-right: 0px;
	}
	span {
		margin: 20rpx;
		color: $uni-text-color-disable;
	}
}
.footer {
	width: calc(100% - 100px);
	.login-btn {
		width: 100%;
		margin: 0;
		font-size: 40rpx;
		border-radius: 60rpx;
		background: $-color-theme-3;
		color: #ffffff;
		text-align: center;
	}
}
</style>
